<template>
   <view class="tabs-cont">
      <!-- <view class="tabs-box"> -->
       <view class="tab-item" :class="selectTab===item.value?'selectTab':''" v-for="item in tabs" :key="item.value" @click="changeTab(item.value)">
          {{item.label}}
       </view>
      <!-- </view> -->
     </view>
</template>
<script>
export default {
  data(){
    return{
       selectTab:1
    }
  },
  props:{
    tabs:{
      type:Array,
      default:[]
    }
  },
  methods:{
    changeTab(item){
      this.selectTab=item;
      this.$emit('changeTab',item)
    }
  }
}
</script>
<style scoped lang="scss">
 .tabs-cont{
      padding:0 58rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #fff;
        .tab-item{
          color: #333333;
          font-size: 32rpx;
          padding: 54rpx 0 34rpx;
          position: relative;
        }
        .selectTab{
          color: #3A92FF;
          &::after {
            content: "";
            position: absolute;
            bottom: 0;
            width: 88rpx;
            height: 6rpx;
            background: #3A92FF;
            border-radius: 2rpx;
            left:50%;
            margin-left: -44rpx;
          }
        }
    }
</style>